<template>
<!-- 订单管理页 -->
<div class="MaxBox">

    <!-- 数据列表 -->
    <div class="list">
        <el-form size="small" :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="订单号">
                <el-input v-model="formData.orderNo" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="formData.consignee" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formData.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="formData.orderState" placeholder="请选择订单状态">
                    <el-option label="已受理" value="已受理"></el-option>
                    <el-option label="派送中" value="派送中"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择时间">
                <el-date-picker v-model="formData.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号"> </el-table-column>
            <el-table-column prop="orderTime" label="下单时间" width="180"> 
                <!-- 用filter 过滤器转时间 -->
                <template  slot-scope="scope">
                {{ scope.row.deliveryTime | filterTime }}
              </template>

            </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column prop="consignee" label="收货人"> </el-table-column>
            <el-table-column prop="deliverAddress" label="送货地址">
            </el-table-column>
            <el-table-column prop="deliveryTime" label="送达时间" width="180">
              <!-- 用filter 过滤器转时间 -->
              <template  slot-scope="scope">
                {{ scope.row.deliveryTime | filterTime }}
              </template>
            </el-table-column>
            <el-table-column prop="orderAmount" label="订单金额"> </el-table-column>
            <el-table-column prop="orderState" label="订单状态"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
import {
    orderList
} from "@/api/order.js";

export default {
    data() {
        return {
            tableData: [],
            pageSize: 5,
            currentPage: 1,
            total: 0,

            //表单数据
            formData: {
                //订单号
                orderNo: '',
                //收货人
                consignee: '',
                //手机号
                phone: '',
                //订单状态
                orderState: '',
                //订单的时间范围
                date: '',
            }
        }
    },
    methods: {
        // 图片上传成功
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getDataList();
        },
        // 上传之前
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getDataList()
        },

        //点击查询按钮
        getData() {
            this.getDataList()
        },
        //请求数据 渲染页面
        async getDataList() {
            this.formData.currentPage = this.currentPage;
            this.formData.pageSize = this.pageSize;
            //将date 字段 的值转换为 字符串
            if (this.formData.date) {
                this.formData.date = JSON.stringify(this.formData.date);
            }


            let res = await orderList(this.formData);
            console.log(res);
            //渲染页面的数据
            this.tableData = res.data.data;
            this.total = res.data.total
        }
    },
    created() {
        //调用接口请求列表
        this.getDataList()
    },

    filters: {
    // 时间函数
    filterTime(timeStr) {
      let date = new Date(timeStr);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let mini = date.getMinutes();
      let s = date.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      mini = mini < 10 ? "0" + mini : mini;
      s = s < 10 ? "0" + s : s;
      return `${y}-${m}-${d} ${h}:${mini}:${s}`;
    },
  },

};
</script>

<style lang="less" scoped>
.MaxBox {
    margin: auto;
    width: 97%;
    height: 100%;
    .list{
      padding: 20px 0 0 0;
    }
}

</style>
